<template>
	<view class="content">
		<!-- 发票上传区域 -->
		<view class="typeBox">
			<text class="typeLine"></text>
			<text class="typeLabel">上传发票及验真</text>
		</view>
		<view class="imgBox">
			<!-- 已上传发票图片 + CSS删除按钮 -->
			<view class="imgItem" v-for="(img, index) in fapiaoImgs" :key="index">
				<image :src="img" class="uploadedImg" mode="aspectFill"></image>
				<!-- CSS实现的删除按钮 -->
				<view class="deleteBtn" @click.stop="deleteImage('fapiao', index)">
					<view class="deleteX"></view>
				</view>
			</view>
			<view class="add" @click="chooseImage('fapiao')">+</view>
		</view>
		<!-- 验收资料上传区域 -->
		<view class="typeBox">
			<text class="typeLine"></text>
			<text class="typeLabel">上传验收资料</text>
		</view>
		<view class="imgBox">
			<!-- 已上传资料图片 + CSS删除按钮 -->
			<view class="imgItem" v-for="(img, index) in ziliaoImgs" :key="index">
				<image :src="img" class="uploadedImg" mode="aspectFill"></image>
				<!-- CSS实现的删除按钮 -->
				<view class="deleteBtn" @click.stop="deleteImage('ziliao', index)">
					<view class="deleteX"></view>
				</view>
			</view>
			<view class="add" @click="chooseImage('ziliao')">+</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit" @click="submit">提交</view>
		<!-- 结果 -->
		<view class="resultBox" v-if="isResult">
			<view class="success" v-if="isSuccess">
				<image :src="baseurl+'user/success.png'" class="postSuccess"></image>
				<text class="result">提交成功</text>
				<text class="tips">活动报销提交成功！</text>
				<view class="btn" @click="$back(1)">
					确定
				</view>
			</view>
			<view class="success" v-if="isFail">
				<image :src="baseurl+'user/fail.png'" class="postFail"></image>
				<text class="result">提交失败</text>
				<text class="tips">活动报销提交失败，再次提交试试！</text>
				<view class="btn" @click="$back(1)">
					再次提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fapiaoImgs: [],
				ziliaoImgs: [],
				isResult: false,
				isSuccess: false,
				isFail: false,
				baseurl: this.$baseurl,
				id:''
			}
		},
		onLoad(options) {
			this.id=options.id
		},
		methods: {
			// 选择图片并上传（无张数、无大小限制）
			chooseImage(type) {
				uni.chooseImage({
					count: 99, // 单次最多选99张（适配多图需求）
					sizeType: ['compressed'], // 可选压缩，减少上传耗时
					sourceType: ['album', 'camera'],
					success: (chooseRes) => {
						const tempFilePaths = chooseRes.tempFilePaths;
						// 循环上传每张图片
						tempFilePaths.forEach((filePath, idx) => {
							uni.uploadFile({
								url: 'https://miantou.guguan.net/api/File/formImage',
								header: {
									'Content-Type': 'multipart/form-data',
									'token': JSON.parse(uni.getStorageSync('TOKEN')).value
								},
								filePath: filePath,
								name: 'file',
								fileType: 'image',
								success: (uploadRes) => {
									let resData;
									try {
										resData = JSON.parse(uploadRes.data);
									} catch (e) {
										this.$toast({
											title: `第${idx + 1}张图片上传失败：格式错误`
										});
										return;
									}
									if (resData.code === 1 && resData.data?.uri) {
										type === 'fapiao' ? this.fapiaoImgs.push(resData
											.data.uri) : this.ziliaoImgs.push(resData
											.data.uri);
									} else {
										this.$toast({
											title: `第${idx + 1}张上传失败：${resData.msg || '未知错误'}`
										});
									}
								},
								fail: () => {
									this.$toast({
										title: `第${idx + 1}张上传失败，请检查网络`
									});
								}
							});
						});
					},
					fail: () => {
						this.$toast({
							title: '选择图片失败，请重试'
						});
					}
				});
			},

			// 删除图片
			deleteImage(type, index) {
				type === 'fapiao' ? this.fapiaoImgs.splice(index, 1) : this.ziliaoImgs.splice(index, 1);
			},
			// 提交逻辑
			submit() {
				console.log(this.fapiaoImgs.length);
				console.log(this.ziliaoImgs.length);
				if (this.fapiaoImgs.length == 0 || this.ziliaoImgs.length == 0) {
					return this.$toast({
						title: '请上传发票及资料'
					});
				}
				// 接口提交示例
				this.$request.post('CommunityActivity/activity_expense', {
						id: this.id,
						invoice: JSON.stringify(this.fapiaoImgs),
						materials: JSON.stringify(this.ziliaoImgs),
					}).then(res => {
						if (res.data.code === 1) {
							this.isSuccess = true;
						} else {
							this.isFail = true;
						}
						this.isResult = true;
					})
					.catch(() => {
						this.isFail = true;
						this.isResult = true;
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resultBox {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;
		overflow-y: scroll;

		.btn {
			width: 252rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			background-color: #4E97AD;
			border-radius: 47rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 90rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.tips {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 35rpx;
			color: #919191;
			display: block;
		}

		.result {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 70rpx;
			display: block;

		}

		.postFail {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}

		.postSuccess {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #EDF6FA;
		padding-bottom: 150rpx;
	}

	.typeBox {
		display: flex;
		align-items: center;
		margin-top: 70rpx;
		margin-left: 40rpx;

		.typeLine {
			width: 6rpx;
			height: 24rpx;
			background: #73A7B7;
		}

		.typeLabel {
			font-size: 30rpx;
			font-weight: 700;
			color: #292929;
			margin-left: 35rpx;
		}
	}

	.imgBox {
		width: 670rpx;
		margin: 50rpx 0 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.imgItem {
		position: relative;
		width: 210rpx;
		height: 210rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.uploadedImg {
		width: 100%;
		height: 100%;
	}

	.deleteBtn {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #D95945;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		touch-action: none;
	}

	.deleteX {
		width: 18rpx;
		height: 18rpx;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #fff; // 白色线条
			transform: rotate(45deg) translateY(-50%);
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #fff; // 白色线条
			transform: rotate(-45deg) translateY(-50%);
		}
	}

	.add {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 60rpx;
		color: #cccccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit {
		width: 500rpx;
		height: 100rpx;
		margin: 150rpx auto 0;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 700;
		background-color: #4e97ad;
		color: #fff;
	}
</style>